<template>
	<view class="content" v-if="pageShow">
		<view class="top">
			<image lazy-load="true" :src="myData.topBackImg" mode="widthFix" class="imgBack response"></image>
			<view class="tLeft">
				<image v-if="myData.logoUrl.length>0" lazy-load="true" class="headImg" :src="myData.logoUrl"></image>
				<image @click="bindGetUserInfo" v-else lazy-load="true" class="headImg" src="../../static/img/my/default-logo.png"></image>
				<view class="baseTxt">
					<view  v-if="myData.nickName.length>0" class="nickName">{{myData.nickName}}</view>
					<view @click="bindGetUserInfo" v-else class="nickName">点击头像授权</view>
					<view class="level"><text class="title">品级</text><text class="levelName">{{myData.levelName}}</text>
					</view>
					<view class="myCode">邀请码:{{myData.myCode}}</view>
				</view>
			</view>
			<view class="tRight" @click="doSign">
				<view  v-if="!myData.todayIsSign" class="getCoin">签到领彩豆</view>
				<view v-else class="getCoin">今日已签到</view>
			</view>
			<view style="clear: both;"></view>
		</view>

		<view class="baseData">
			<view class="data bd1" @click="toCorrectDetail">
				<view class="txt">
					总答对数<image lazy-load="true" class="toMask" src="../../static/img/my/to_mask.png"></image>
				</view>
				<view class="num">
					{{myData.allCorrentCount}}
				</view>
			</view>
			<view class="data bd2"@click="toCorrectDetail" >
				<view class="txt">
					今日战绩<image lazy-load="true" class="toMask" src="../../static/img/my/to_mask.png"></image>
				</view>
				<view class="num">
					{{myData.todayCorrentCount}}
				</view>
			</view>
			<view class="data bd3" @click="toCaiDouPage">
				<view class="txt">
					可用彩豆<image  lazy-load="true" class="toMask" src="../../static/img/my/to_mask.png"></image>
				</view>
				<view class="num">
					{{myData.hasScore}}
				</view>
			</view>
		</view>
		<view class="banner" @click="toInvite">
			<image lazy-load="true" mode="widthFix" class="response" :src="myData.invitPicUrl"></image>
		</view>

		<view class="friendInfo">
			<view class="fItem r" @click="toMyFriendPage">
				<image lazy-load="true" src="../../static/img/my/my_friend.png" mode="widthFix"></image>
				<view class="txt">我的好友<image class="toMask" src="../../static/img/my/to_mask.png"></image>
				</view>
				<view class="num">{{myData.friendCount}}</view>
			</view>
			<view class="fItem r" @click="toCaiDouPage">
				<image lazy-load="true" src="../../static/img/my/my_today_income.png" mode="widthFix"></image>
				<view class="txt">今日彩豆<image class="toMask" src="../../static/img/my/to_mask.png"></image>
				</view>
				<view class="num">{{myData.todayScore}}</view>
			</view>
			<view class="fItem l" @click="getFriendContribute">
				<image lazy-load="true" src="../../static/img/my/my_income.png" mode="widthFix"></image>
				<view class="txt">好友贡献<image class="toMask" src="../../static/img/my/to_mask.png"></image>
				</view>
				<view class="num"><text>{{myData.fromFriendScore}}</text></view>
			</view>
			<view style="clear: both;"></view>
		</view>

		<view class="tool">
			
			<view class="item" @click="toLottery">
				<image lazy-load="true" class="element leftImg" src="https://im.gbn.red/hongbao.png"></image>
				<view class="element txt">天天抽奖</view>
				<image lazy-load="true" class="element rightImg" src="../../static/img/my/right.png"></image>
			</view>
			
			<view class="item" @click="toMyAwardPage">
				<image lazy-load="true" class="element leftImg" src="../../static/img/my/tool/tool_fuli.png"></image>
				<view class="element txt">已领福利</view>
				<image lazy-load="true" class="element rightImg" src="../../static/img/my/right.png"></image>
			</view>
			<view class="item" @click="toCaiDouPage">
				<image lazy-load="true" class="element leftImg" src="../../static/img/my/tool/tool_cd.png"></image>
				<view class="element txt">彩豆明细</view>
				<image lazy-load="true" class="element rightImg" src="../../static/img/my/right.png"></image>
			</view>
			
			<view class="item" @click="toInvite">
				<image lazy-load="true" class="element leftImg" src="../../static/img/my/tool/tool_invite.png"></image>
				<view class="element txt">邀请好友<text class="note">获取更多彩豆(⁎⁍̴̛ᴗ⁍̴̛⁎)</text></view>
				<image lazy-load="true" class="element rightImg" src="../../static/img/my/right.png"></image>
			</view>
			<button class="kfBtn" open-type="contact">
			<view class="item" @click="toRealtionOurPage">
				<image class="element leftImg" src="../../static/img/my/tool/tool_kefu.png"></image>
				<view class="element txt">联系客服</view>
				<image class="element rightImg" src="../../static/img/my/right.png"></image>
			</view>
			</button>
			<view class="item" @click="toShopTool">
				<image lazy-load="true" class="element leftImg" src="../../static/img/my/tool/tool_shop.png"></image>
				<view class="element txt">商户工具<text class="note">加入我们｜轻松赢销</text></view>
				<image lazy-load="true" class="element rightImg" src="../../static/img/my/right.png"></image>
			</view>
			<view class="item" @click="toAddressPage">
				<image lazy-load="true" class="element leftImg" src="../../static/img/my/tool/tool_addr.png"></image>
				<view class="element txt">收货地址</view>
				<image lazy-load="true" class="element rightImg" src="../../static/img/my/right.png"></image>
			</view>
			<view class="item" @click="tpRankPage">
				<image lazy-load="true" class="element leftImg" src="../../static/img/my/tool/tool_phb.png"></image>
				<view class="element txt">排行榜<text class="note">好友答题大比拼</text></view>
				<image lazy-load="true" class="element rightImg" src="../../static/img/my/right.png"></image>
			</view>
			<view class="item" @click="toProblemPage">
				<image lazy-load="true" class="element leftImg" src="../../static/img/my/tool/tool_pro.png"></image>
				<view class="element txt">常见问题<text class="note"></text></view>
				<image lazy-load="true" class="element rightImg" src="../../static/img/my/right.png"></image>
			</view>
			
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				myData: {
					myCode:'',
					logoUrl:'',
					nickName: '', //昵称
					todayIsSign:false,
					levelName: '', //等级名称
					allCorrentCount: 0,
					todayCorrentCount: 0,
					hasScore: 0, //可用彩豆
					friendCount: 0, //好友数量
					todayScore: 0, //今日彩豆
					fromFriendScore: 0 ,//好友贡献,
					outTradeNo:'',
					isSubmitSign:false
				},
				pageShow:false
			}
		},
		components: {

		},
		onShow() {
			this.getBaseData();
		},
		methods: {
			bindGetUserInfo() {
				let that = this;
				const sessionKey = uni.getStorageSync('sessionKey');
				wx.getUserProfile({
					desc: '用于完善会员资料',
					success: (res) => {
						let avatarUrl= res.userInfo.avatarUrl;
						let city= res.userInfo.city;
						let country= res.userInfo.country;
						let gender= res.userInfo.gender;
						let nickName= res.userInfo.nickName;
						let province= res.userInfo.province;
						let language= res.userInfo.language;
						that.myData.logoUrl = avatarUrl;
						that.myData.nickName = nickName;//头像和昵称更新
						uni.request({
							url: that.baseUrl + 'WXLogin/saveUserInfo',
							method: 'POST',
							data: {
								sessionKey: sessionKey,
								nickName: nickName,
								gender: gender,
								language: language,
								city: city,
								province: province,
								country: country,
								avatarUrl: avatarUrl
							},
							success: function(res) {
								uni.hideLoading();
								uni.showToast({
									icon:'none',
									title: res.data.msg,
									duration: 2000
								});
							},
							complete: function() {
							}
						})
					},fail: (res) => {
						uni.showToast({
							icon:'none',
							title: '授权失败！',
							duration: 2000
						});
					}
				})
			},
			getBaseData(){
				let opts = {
					url: 'my/getBaseData',
					method: 'get'
				};
				let param = {};
				this.tokenRequest(opts, param).then(res => {
					this.pageShow = true;
					uni.hideLoading();
					let rData = res.data;
					this.myData = rData;
				}, error => {})
			},
			toLottery(){
				uni.navigateTo({
					url:'../lottery/index'
				})
			},
			doSign(){//签到
				if(this.isSubmitSign){
					uni.showToast({
						icon:'none',
					    title: '请稍后再试',
					    duration: 2000
					});
					return;
				}
				this.isSubmitSign = true;
				let that = this;
				setTimeout(function(){
					that.isSubmitSign = false;
				},2000)
				let opts = {
					url: 'yungouPay/getPayInfo',
					method: 'get'
				};
				let param = {};
				this.tokenRequest(opts, param).then(res => {
					let myJsonStr  = JSON.parse(JSON.parse(res.data).minPayParam);
					uni.requestPayment({
					    provider: 'wxpay',
					    timeStamp: myJsonStr.timeStamp,
					    nonceStr: myJsonStr.nonceStr,
					    package: myJsonStr.package,
					    signType: 'MD5',
					    paySign: myJsonStr.paySign,
					    success: function (res) {
							setTimeout(function(){
								uni.showToast({
								    title: '签到成功',
								    duration: 2000
								});
							},800)
					    },
					    fail: function (err) {
							setTimeout(function(){
								uni.showToast({
									icon:'none',
								    title: '您已取消签到',
								    duration: 2000
								});
							},800)
					    },complete:function(info){
						}
					});
				})
				// }, error => {})
				
				// let that = this;
				// let opts = {
				// 	url: 'my/doSign',
				// 	method: 'post'
				// };
				// let param = {};
				// this.tokenRequest(opts, param).then(res => {
				// 	uni.hideLoading();
				// 	let rMsg = res.msg;
				// 	let rCode = res.code;
				// 	if(rCode == 200){
				// 		this.myData.todayIsSign = true;
				// 	}
				// 	that.getBaseData();
				// 	setTimeout(function(){
				// 		uni.showToast({
				// 			title: rMsg,
				// 			mask: true,
				// 			icon: 'none',
				// 			duration: 1500
				// 		})
				// 	},1000)
					
				// }, error => {})
			},
			toCorrectDetail(){
				uni.navigateTo({
					url: 'tool/correctDetail'
				});
			},
			toProblemPage() {
				uni.navigateTo({
					url: '../common/imgInfo?type=1&txt=常见问题'
				});
			},
			toAddressPage(){
				uni.navigateTo({
					url: 'tool/address/index'
				});
			},
			toCaiDouPage() {
				uni.navigateTo({
					url: 'tool/caidouDetail?fromFriend='+0
				});
			},
			toMyAwardPage() {

				uni.navigateTo({
					url: 'tool/awardDetail'
				});

			},
			toShopTool(){
				//是否是商家
				let opts = {
					url: 'shoptool/hasShop',
					method: 'get'
				};
				let param = {};
				this.tokenRequest(opts, param).then(res => {
					uni.hideLoading();
					uni.navigateTo({
						url: 'shopTool/index'
					});
				}, error => {})
			},
			toRealtionOurPage() {
				
			},
			toAboutOurPage() {
				console.log("toAboutOurPage");
			},
			toInvite() {
				uni.navigateTo({
					url: 'share/share'
				});
			},
			tpRankPage(){
				uni.navigateTo({
					url: 'tool/rank'
				});
			},
			toMyFriendPage() {
				uni.navigateTo({
					url: 'tool/myFriend'
				});
			},
			getFriendContribute() { //好友贡献
				uni.navigateTo({
					url: 'tool/caidouDetail?fromFriend='+1
				});
			}
		}
	}
</script>

<style scoped>
	.content {
		padding-bottom: 10rpx;
	}

	.toMask {
		width: 30rpx !important;
		height: 30rpx !important;
		vertical-align: middle;
	}

	.friendInfo {
		background-color: #fff;
		height: 140rpx;
		padding: 20rpx;
	}

	.friendInfo .r,
	.l {
		float: left;
		width: 236.6rpx;
		text-align: center;
	}
.kfBtn{
	text-align: left;
}
	.friendInfo .txt {
		font-weight: 800;
		font-size: 28rpx;
		float: none;
	}

	.friendInfo .num {
		float: none;
	}

	.friendInfo image {
		width: 50rpx;
		height: 50rpx;
		float: none;
	}

	/* .banner {
		margin-top: 20rpx;
	} */


	.top {
		height: 360rpx;
	}

	/**
	 * 头部-个人信息
	 */
	.top .headImg {
		width: 120rpx;
		float: left;
		height: 120rpx;
		border-radius: 20rpx;
		vertical-align: middle;
	}

	.top .imgBack {
		height: 360rpx !important;
		width: 100%;
	}

	.top .tLeft {
		position: absolute;
		float: left;
		top: 100rpx;
		left: 50rpx;
	}

	.top .baseTxt {
		margin-left: 20rpx;
		font-weight: 800;
		font-size: 35rpx;
		float: left;
	}

	.top .nickName {
		width: 230rpx;
		color: #333333;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.top .level {
		margin-top: 10rpx;
		font-size: 25rpx;
	}

	.top .level .title {
		background-color: #FFFFFF;
		padding: 0 10rpx;
		border-bottom-left-radius: 20rpx;
		border-top-left-radius: 20rpx;
		border-bottom: 2rpx solid #fff;
		border-top: 2rpx solid #fff;
	}

	.top .level .levelName {
		border: 2rpx solid #fff;
		padding: 0 10rpx;
		border-bottom-right-radius: 20rpx;
		border-top-right-radius: 20rpx;
		color: #fff;
	}

	.top .tRight {}

	.top .tRight .getCoin {
		position: relative;
		float: right;
		bottom: 200rpx;
		right: 30rpx;
		background-color: #F8F8F8;
		width: 140rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 26rpx;
		border-radius: 20rpx;
		padding: 3rpx 10rpx;
	}


	.baseData {
		background-color: #FFFFFF;
		width: 690rpx;
		height: 160rpx;
		margin-left: 30rpx;
		border-radius: 20rpx;
		position: absolute;
		top: 260rpx;
	}

	.baseData .data {
		float: left;
		text-align: center;
		width: 230rpx;
		line-height: 160rpx;
	}

	.baseData .data .txt {
		line-height: 100rpx;
		float: none;
	}

	.baseData .data .num {
		line-height: 30rpx;
		color: #555555;
		font-size: 40rpx;
		font-weight: 800;
	}


	.tool {
		background-color: #fff;
		width: 680rpx;
		margin-left: 15rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.tool .item .element {
		float: left;
	}

	.tool .item {
		line-height: 50rpx;
		overflow: hidden;
		margin-top: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #e6e6e6;
	}

	.tool .item .leftImg {
		width: 50rpx;
		height: 50rpx;
	}

	.tool .item .txt {
		width: 560rpx;
		font-size: 30rpx;
		margin-left: 20rpx;
	}

	.tool .item .rightImg {
		width: 30rpx;
		margin-top: 10rpx;
		height: 30rpx;
	}
.myCode{
	margin-top: 15rpx;
	font-size: 28rpx;
}
	.tool .item .note {
		font-size: 24rpx;
		margin-left: 20rpx;
		color: #C8C7CC;
	}
	button {
		margin: 0;
		padding: 0;
		color: #555;
		height:100% !important;
		outline: none;
		font-size: 30rpx !important;
		display: inline-block;
		border-radius: 0;
		background-color: transparent;
		line-height: inherit;
		width: max-content;
	}
	
	button:after {
		border: none;
	}
</style>
